<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://ibootstrap-file.b0.upaiyun.com/www.layoutit.com/css/builder/v3/layoutit.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h3 th:text="${title}">Welcome to springboot</h3>
<table>
    <tr>
        <th>名称</th>
        <th>角色</th>
        <th>身份</th>
    </tr>
    <!--/*@thymesVar id="userList" type="java"*/-->
    <tr th:each="user : ${userList}">
        <td th:text="${user.userName}"></td>
        <td th:text="${user.userRole}"></td>
        <td th:text="${user.userIdCard}"></td>
    </tr>
</table>


<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    提醒
                </h4>
            </div>
            <div class="modal-body">
                你有新的订单
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button onclick="location.reload()" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://192.168.1.191:8080/webSocket");
    } else {
        alert("不支持该socket");
    }
    websocket.onopen = function (event) {
        console.log("建立连接")
    }
    websocket.onclose = function (event) {
        console.log("关闭连接")
    }
    websocket.onmessage = function (event) {
        console.log("收到消息 : " + event.data);
        $('#myModal').modal('show');
    }
    websocket.onerror = function () {
        console.log("websocket同行发生错误")
    }
    window.unbeforeunload = function () {
        websocket.close();
    }
</script>
</body>
</html>